<script setup>
  import { bxjMessage } from "@/utils/bxjMessage";
  const { devMes } = bxjMessage();
</script>

<template>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- contents -->
    <div class="main_content">
      <div class="main_content_inner">
        <nav class="responsive-tab">
          <ul>
            <li class="uk-active">
              <a href="#"> <i class="uil-film"></i> Movies </a>
            </li>
            <li @click="devMes()">
              <a> <i class="uil-video"></i> Videos </a>
            </li>
            <!-- <li><a href="#"> <i class="uil-game"></i> Games</a></li> -->
          </ul>
        </nav>

        <div class="section-small">
          <div
            class="uk-child-width-1-4@m uk-child-width-1-3@s"
            uk-grid
            uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100"
          >
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/1.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Motivation</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/2.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Sports</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/3.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Workout</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/4.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Music</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-1.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>BattleState</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-6.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Animals</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-5.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Motivation</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-4.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Sports</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-2.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Workout</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-3.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Music</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-1.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>BattleState</h4>
                  </div>
                </div>
              </a>
            </div>
            <div>
              <a href="#">
                <div
                  class="catagroy-card"
                  data-src="@/assets/images/channals/img-6.jpg"
                  uk-img
                >
                  <div class="catagroy-card-content">
                    <h4>Animals</h4>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <BxjPage />
    </div>
  </div>
</template>

<style></style>
